/**
 * @Creator: eyes
 * @Date: 2020/3/19
 * 中国地图组件
 */
import React, {useMemo, useContext, useEffect, useState, useCallback} from 'react';
import echarts from 'echarts';
import {Spin} from 'antd';
import {StoreContext} from '../data';
import {USER_FEATURE_ACTION_TYPES} from '../utils';

import CHINA_JSON from './china';

// 根据业务数据结构生成echarts需要的数据结构(Option)
const generateOption = data => (
    {
        tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter({name}) {
                const {value = 0, percent = 0} = data.find(_ => _.name === name) || {};
                return `${name}<br/>人次: ${value}<br/>占比:${percent}%`;
            },
        },
        visualMap: {
            left: 'right',
            min: 0,
            max: (data.length > 0 && Math.max(...data.map(item => item.value))) || Infinity,
            // 按照数量大小,显示不同的色值
            inRange: {
                color: [
                    '#FFF0E5',
                    '#FFE2CC',
                    '#FFD2B2',
                    '#FFC499',
                    '#FFB57F',
                    '#FFA766',
                    '#FF8933',
                    '#FF6C00',
                ],
            },
            text: ['多', '少'],
            calculable: false,
        },
        series: [
            {
                name: '地域分布',
                type: 'map',
                roam: false,
                map: 'CHINA',
                emphasis: {
                    label: {
                        show: true,
                    },
                },
                data,
            },
        ],
    }
);

export default props => {
    const {
        state: {
            areaSearchResult,
            areaSearchLoading,
        },
        dispatch,
    } = useContext(StoreContext);

    const areaMapId = 'user-feature-area-map';


    // 设置地域分布图中选中的省市, 用于各省市用户清单表格的联动显示
    const onMapClick = useCallback(({name: province}) => {
        dispatch({
            type: USER_FEATURE_ACTION_TYPES.SELECT_PROVINCE,
            payload: {
                province,
            },
        });
    }, []);

    // 存储echarts实例
    const [eChartsInstance, setEChartsInstance] = useState(null);

    const getMapData = useMemo(
        () => areaSearchResult.map(({province, pv, percent}) => ({
            name: province,
            value: pv,
            percent,
        })),
        [areaSearchResult],
    );

    // echarts初始化的effect
    useEffect(() => {
        const chartsContainer = echarts.init(document.getElementById(areaMapId));

        echarts.registerMap('CHINA', CHINA_JSON);

        setEChartsInstance(chartsContainer);

        if (getMapData && chartsContainer) {
            chartsContainer.setOption(generateOption(getMapData), true);
        }

        chartsContainer.on('click', onMapClick);

        window.addEventListener('resize', chartsContainer.resize);
    }, []);

    // echarts更新的effect
    useEffect(() => {
        if (getMapData && eChartsInstance) {
            eChartsInstance.setOption(generateOption(getMapData), true);
        }
    }, [getMapData]);

    return (
        <Spin spinning={areaSearchLoading}>
            <div id={areaMapId} className="user-feature-area-map">
            </div>
        </Spin>
    );
};
